// 引入顶部组件
import NavTop from "../components/navtop"
import { Tabs } from 'antd-mobile'
import '../assets/css/detail.css'
import { ActionBar } from 'react-vant';
import { CartO, ChatO, ShopO, StarO, Arrow } from '@react-vant/icons';
import { getgoodsinfo, cartadd } from '../request/app'
import { useEffect, useState } from 'react'
import { useParams, } from 'react-router-dom';
import { useNavigate } from 'react-router-dom'

function Login() {
    let title = '商品详情'
    const [shop, setshop] = useState([])
    console.log(useParams());
    let { idm } = useParams()

    useEffect(() => {
        getgoodsinfo({
            id: idm
        }).then(res => {
            console.log(res);
            setshop([...res.list])
        })
    }, [])
    const Navigate = useNavigate()
    function tocart() {

        cartadd({
            uid:JSON.parse(sessionStorage.getItem('userInfo')).uid,
            // uid: '1976c800-727f-11eb-be60-972b7972e9e3',
            type: "1",
            goodsid: idm,
            num: 1
        }
        ).then(res => {
            console.log(res);
            if (res.code == '200') {
                Navigate('/index/cart')
            }

        })


    }

    return (
        <div>
            <NavTop title={title}></NavTop>

            <Tabs>
                <Tabs.Tab title='商品' key='d' />
                <Tabs.Tab title='评价' key='c' />
                <Tabs.Tab title='详情' key='b' />
                <Tabs.Tab title='推荐' key='a' />
            </Tabs>
            {
                shop.map(item => {
                    return (

                        <div>
                            {/* 身体 */}
                            <div className="De_body">
                                {/* 身体 （中部分）*/}
                                <div className="D_D_center">
                                    {/* 身体 （中部分《《《《上》》》》 ）*/}
                                    <div className="D_D_C_top">

                                        < img src={item.img} alt="" />

                                        <span>8/8</span>

                                    </div>

                                    {/* 身体 （中部分《《《《中》》》》 ）*/}
                                    <div className="D_D_C_center">
                                        {/* < img src={require()} alt="" className="imgs1" /> */}
                                        <div className="big_box">
                                            <div className="small fl  abc">
                                                <span className="S_s fl ">限时</span>
                                                <div className="S_d1 fl ">
                                                    <span>￥</span>{item.price}
                                                    <s>￥{item.market_price}</s>
                                                </div>
                                                <div className="S_d2 fr">
                                                    <ActionBar.Icon icon={<StarO color="#ff6040" />} text="收藏" />
                                                </div>
                                            </div>
                                            <p>{item.goodsname}</p >
                                            <p>{item.description}</p>
                                            <p>11.11限时299元起</p >
                                            <p>此商品于2020-11-11,00点结束闪购特卖闪购专场   <span className="fr spance">查看<Arrow /></span></p >
                                        </div>
                                    </div>
                                    {/* 身体 （中部分《《《《下》》》》 ）*/}
                                    <div className="D_D_C_bottom">
                                        <p>分期 <span>可选3/6/12期</span></p >
                                    </div>
                                </div>
                            </div>

                        </div>

                    )
                })
            }

            <ActionBar>
                <ActionBar.Icon icon={<ChatO />} text="客服" />
                <ActionBar.Icon icon={<CartO />} text="购物车" />
                <ActionBar.Icon icon={<ShopO />} text="店铺" />
                <ActionBar.Button type="warning" text="加入购物车" onClick={() => tocart()} />
                <ActionBar.Button type="danger" text="立即购买" />
            </ActionBar>





        </div>
    )
}

export default Login